<template>
  <div class="home-box">
    <!-- 广告 -->
    <div v-if="topBannerList" class="banner-box">
      <div class="banner">
        <a :href="topBannerList.linkUrl" target="_blank">
          <img :src="topBannerList.coverUrl" alt="">
        </a>
      </div>
    </div>
    <!-- 内容区 -->
    <div class="content-box">
      <div class="left-content">
        <!-- 轮播图 -->
        <ImgSwiper :pageType="'HOME_PAGE'"/>
        <!-- 小Banner -->
        <div class="news-box" v-if="smallBannerList.length">
          <el-row :gutter="13">
            <el-col :span="6" v-for="(item, index) of smallBannerList" :key="index">
              <div class="news-item" @click="toInformationDetail(item.sourceId)">
                <img :src="item.coverUrl" class="img" alt="">
                <div class="title-box">
                  <div class="title">{{item.name}}</div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
        <!-- 最新资讯 -->
        <LatestNews :list="zxlist.slice(0, 6)" v-if="zxlist.length" />
        <!-- 推荐 -->
        <Recommend />
        <!-- 专家库 -->
        <Experts />
        <!-- 专家库下的新闻2 -->
        <template v-if="zxlist.length > 6">
          <NewsItem v-for="(item, index) of zxlist.slice(6, 9)" :key="'news2'+ index" :data="item" />
        </template>
        <!-- 超级进化者banner -->
        <div class="shanghai-banner" v-if="zxAdverBanner.coverUrl" :style="{backgroundImage: 'url(' + zxAdverBanner.coverUrl + ')'}" @click="toLinkUrlDetail(zxAdverBanner.linkUrl)"></div>
        <!-- 专家库下的新闻3 -->
        <template v-if="zxlist.length > 9">
          <NewsItem v-for="(item, index) of zxlist.slice(9)" :key="'news3'+ index" :data="item" />
        </template>
        <!-- 更多内容 -->
        <div class="more-btn" v-if="zxlist.length < maxPage" @click="loadMore">加载更多内容…</div>
        <div class="nodata" v-if="zxlist.length === maxPage">到底了...</div>
      </div>
      <div class="right-content">
        <!-- 热门文章 -->
        <HotArticles :data="hotArticlesList.slice(0, 7)" v-if="hotArticlesList.length" />
        <!-- 热门文章下的广告 -->
        <div class="advertising2-box" v-if="rmwzAdverBanner.uuid" :style="{backgroundImage: 'url(' + rmwzAdverBanner.coverUrl + ')'}" @click="toLinkUrlDetail(rmwzAdverBanner.linkUrl)"></div>
        <!-- 活动 -->
        <RightActivityBox :data="activityList.slice(0, 3)" v-if="activityList.length" />
        <!-- 活动下广告3 -->
        <div class="advertising2-box" v-if="hdAdverBanner.uuid" :style="{backgroundImage: 'url(' + hdAdverBanner.coverUrl + ')'}" @click="toLinkUrlDetail(hdAdverBanner.linkUrl)"></div>
        <!-- 挚物研究院 -->
        <InstituteBox v-if="xtList.length" :xtList="xtList" />
        <!-- 研究院下广告3 -->
        <div class="advertising2-box" v-if="qwAdverBanner.uuid" :style="{backgroundImage: 'url(' + qwAdverBanner.coverUrl + ')'}" @click="toLinkUrlDetail(qwAdverBanner.linkUrl)"></div>
        <!-- 报告 -->
        <template v-if="qwList.length">
          <ReportItem v-for="(item, index) of qwList.slice(0, 3)" :key="'report' + index" :data="item" />
        </template>
        <!-- 案例库 -->
        <template v-if="alkList.length">
          <CaseBox :data="alkList.slice(0, 4)" />
        </template>
        <!-- 案例库下广告2 -->
        <div class="advertising2-box" v-if="alkAdverBanner.uuid" :style="{backgroundImage: 'url(' + alkAdverBanner.coverUrl + ')'}" @click="toLinkUrlDetail(alkAdverBanner.linkUrl)"></div>
        <!-- 企业库 -->
        <CompanyLibrary />
        <!-- 企业下广告3 -->
        <div class="advertising2-box" v-if="qykAdverBanner.uuid" :style="{backgroundImage: 'url(' + qykAdverBanner.coverUrl + ')'}" @click="toLinkUrlDetail(qykAdverBanner.linkUrl)"></div>
        <!-- 热门标签 -->
        <HotTags />
        <!-- 热门标签下广告3 -->
        <div class="advertising3-box" v-if="tagAdverBanner.uuid" :style="{backgroundImage: 'url(' + tagAdverBanner.coverUrl + ')'}" @click="toLinkUrlDetail(tagAdverBanner.linkUrl)"></div>
      </div>
    </div>
  </div>
</template>

<script>
// 轮播图
import ImgSwiper from '@/views/home/components/ImgSwiper';
// 最新资讯
import LatestNews from '@/views/home/components/LatestNews';
// 推荐
import Recommend from '@/views/home/components/Recommend';
// 专家库
import Experts from '@/views/home/components/Experts';
// 新闻Item
import NewsItem from '@/views/home/components/NewsItem';
// 热门文章
import HotArticles from '@/views/home/components/HotArticles';
// 右侧活动
import RightActivityBox from '@/views/home/components/RightActivityBox';
// 挚物研究院
import InstituteBox from '@/views/home/components/InstituteBox';
// 报告Item
import ReportItem from '@/views/home/components/ReportItem';
// 案例库
import CaseBox from '@/views/home/components/CaseBox';
// 企业库
import CompanyLibrary from '@/views/home/components/CompanyLibrary';
// 热门标签
import HotTags from '@/views/home/components/HotTags';
import { advertsList, articlesList, sideModuleRecommends } from '@/api/api';

export default {
  components: {
    ImgSwiper,
    LatestNews,
    Recommend,
    Experts,
    NewsItem,
    HotArticles,
    RightActivityBox,
    InstituteBox,
    ReportItem,
    CaseBox,
    CompanyLibrary,
    HotTags
  },
  data() {
    return {
      zxlist: [],
      topBannerList: [],
      smallBannerList: [],
      start: 0, //资讯分页，0为第一页
      maxPage: '',
      zxAdverBanner: '',
      // 右侧案例库下广告
      alkAdverBanner: {},
      // 右侧热门标签下广告
      tagAdverBanner: {},
      // 右侧热门文章下广告
      rmwzAdverBanner: {},
      // 右侧活动下广告
      hdAdverBanner: {},
      // 右侧企业下广告
      qykAdverBanner: {},
      // 右侧研究院下广告
      qwAdverBanner: {},
      // 右侧热门文章
      hotArticlesList: [],
      // 右侧活动
      activityList: [],
      // 右侧案例库
      alkList: [],
      // 右侧挚物研究院
      xtList: [],  // 选题
      qwList: [],  // 报告
    }
  },
  mounted() {
    this.getSmallBanner();
    this.getTopBanner();
    this.getZXList();
    this.getZXAdverBanner();
    this.getALKBanner();
    this.getSideRmwzAdvert();
    this.getSideHdAdvert();
    this.getSideQwAdvert();
    this.getSideQykAdvert();
    this.getTagBanner();
    this.getAlkList();
    this.getQwList();
    this.getRMWZList();
    this.getHDList();
  },
  methods: {
    // 广告位
    toPage(item) {
      console.log(item, 123123)
    },
    // 获取右侧推荐信息
    async getAlkList() {
      const params = {
        moduleId: 3,
        status: 1,
        resType: 'AL'
      };
      const res = await sideModuleRecommends(params);
      this.alkList = res.list || [];
    },
    // 获取右侧活动信息
    async getHDList() {
      const params = {
        moduleId: 1,
        status: 1,
        resType: 'HD'
      };
      const res = await sideModuleRecommends(params);
      this.activityList = res.list || [];
    },
    // 获取右侧热门文章
    async getRMWZList() {
      const params = {
        moduleId: 0,
        status: 1,
        resType: 'ZX'
      };
      const res = await sideModuleRecommends(params);
      this.hotArticlesList = res.list || [];
    },
    // 获取推荐信息--挚物研究院
    async getQwList() {
      const params = {
        moduleId: 2,
        status: 1,
      };
      const res = await sideModuleRecommends(params);
      //this.hotArticlesList = res.list || [];
      this.qwList = res.list.filter(item => item.resType === 'BG') || [];
      this.xtList = res.list.filter(item => item.resType === 'XT') || [];

    },
    // 加载更多
    loadMore() {
      if (this.zxlist.length < this.maxPage) {
        this.getZXList();
      }
    },
    // 获取最新资讯
    async getZXList() {
      const params = {
        type: 'ZX',
        status: 1,
        limit: 20,
        start: this.zxlist.length
      };
      const res = await articlesList(params);
      this.maxPage = res.count;
      this.zxlist = this.zxlist.concat(res.list);
    },
    // 获取top banner
    async getTopBanner() {
      const params = {
        type: 'TOP',
        pageType: 'HOME_PAGE',
      };
      const res = await advertsList(params);
      const list = res.list.filter(item => {
        return item.status === 1
      });
      this.topBannerList = list[0];
    },
    // 获取小banner
    async getSmallBanner() {
      const params = {
        type: 'SMALL_BANNER',
        pageType: 'HOME_PAGE',
      };
      const res = await advertsList(params);
      const list = res.list.filter(item => {
        return item.status === 1
      });
      this.smallBannerList = list.slice(0, 4);
    },
    // 获取右侧广告
    async getALKBanner() {
      const params = {
        type: 'SIDE',
        pageType: 'HOME_PAGE',
        status: 1,
        position: 'ALK'
      };
      const res = await advertsList(params);
      // 随机获取一个banner
      if (res.list.length) {
        const randomIndex = Math.floor(Math.random() * res.list.length);
        this.alkAdverBanner = res.list[randomIndex];
      }
    },
    // 获取右侧广告
    async getTagBanner() {
      const params = {
        type: 'SIDE',
        pageType: 'HOME_PAGE',
        status: 1,
        position: 'RMBQ'
      };
      const res = await advertsList(params);
      // 随机获取一个banner
      if (res.list.length) {
        const randomIndex = Math.floor(Math.random() * res.list.length);
        this.tagAdverBanner = res.list[randomIndex];
      }
    },
    // 右侧热门文章下广告
    async getSideRmwzAdvert() {
      const params = {
        type: 'SIDE',
        pageType: 'HOME_PAGE',
        status: 1,
        position: 'RMWZ'
      };
      const res = await advertsList(params);
      // 随机获取一个banner
      if (res.list.length) {
        const randomIndex = Math.floor(Math.random() * res.list.length);
        this.rmwzAdverBanner = res.list[randomIndex];
      }
    },
    // 右侧活动下广告
    async getSideHdAdvert() {
      const params = {
        type: 'SIDE',
        pageType: 'HOME_PAGE',
        status: 1,
        position: 'HD'
      };
      const res = await advertsList(params);
      // 随机获取一个banner
      if (res.list.length) {
        const randomIndex = Math.floor(Math.random() * res.list.length);
        this.hdAdverBanner = res.list[randomIndex];
      }
    },
    // 右侧研究院下广告
    async getSideQwAdvert() {
      const params = {
        type: 'SIDE',
        pageType: 'HOME_PAGE',
        status: 1,
        position: 'QW'
      };
      const res = await advertsList(params);
      // 随机获取一个banner
      if (res.list.length) {
        const randomIndex = Math.floor(Math.random() * res.list.length);
        this.qwAdverBanner = res.list[randomIndex];
      }
    },
    // 右侧企业下广告
    async getSideQykAdvert() {
      const params = {
        type: 'SIDE',
        pageType: 'HOME_PAGE',
        status: 1,
        position: 'QYK'
      };
      const res = await advertsList(params);
      // 随机获取一个banner
      if (res.list.length) {
        const randomIndex = Math.floor(Math.random() * res.list.length);
        this.qykAdverBanner = res.list[randomIndex];
      }
    },
    // 获取资讯中广告 banner
    async getZXAdverBanner() {
      const params = {
        pageType: 'HOME_PAGE',
        type: 'FEED',
        status: 1
      };
      const res = await advertsList(params);
      // 随机获取一个banner
      if (res.list.length) {
        const randomIndex = Math.floor(Math.random() * res.list.length);
        this.zxAdverBanner = res.list[randomIndex];
        console.log(this.zxAdverBanner, 'asdfasdf')
      }
    },
    // 小Banner点击进入资讯详情
    toInformationDetail(uuid) {
      let routerJump = this.$router.resolve({ name: 'InformationDetail', query: {uuid} });
      window.open(routerJump.href, '_blank');
    },
    // 小Banner点击进入资讯详情
    toLinkUrlDetail(url) {
      if (url) {
        window.open(url, '_blank');
      }
    }
  }
}
</script>

<style lang="scss" scoped>
img:hover {
    transform: scale(1.12);
}
.img:hover {
    transform: scale(1.12);
}
img, .img {
  transition: all 1s;
}
.home-box {
  background: #F1F1F1;
  padding-top: 20px;
  .banner-box {
    padding-bottom: 40px;
    display: flex;
    justify-content: center;
    .banner {
      width: 1180px;
      height: 120px;
      overflow: hidden;
      img {
        display: inline-block;
        width: 1180px;
        height: 120px;
      }
    }
  }
  .content-box {
    width: 1180px;
    margin: 0 auto;
    overflow: hidden;
    .left-content {
      width: 760px;
      float: left;
      .news-box {
        padding-top: 20px;
        .news-item {
          width: 180px;
          height: 180px;
          border-radius: 4px;
          background-size: cover;
          position: relative;
          cursor: pointer;
          overflow: hidden;
          .img {
            width: 180px;
            height: 180px;
            border-radius: 4px;
          }
          .title-box {
            width: 100%;
            padding: 16px 16px 12px;
            box-sizing: border-box;
            background: linear-gradient(-180deg,transparent,rgba(0,0,0,.65) 97%);
            position: absolute;
            bottom: 0;
            left: 0;
            .title {
              font-size: 14px;
              font-family: "Microsoft YaHei", 微软雅黑, "MicrosoftJhengHei";
              font-weight: normal;
              color: #ffffff;
              line-height: 20px;
              overflow: hidden;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
              max-height: 40px;
              word-break: break-all;
            }
          }
        }
      }
      .shanghai-banner {
        width: 760px;
        height: 140px;
        background: url('../../assets/shanghai.png') no-repeat;
        background-size: cover;
        margin-bottom: 24px;
        cursor: pointer;
      }
      .more-btn {
        width: 200px;
        height: 48px;
        line-height: 48px;
        background: #FFFFFF;
        border-radius: 4px;
        border: 1px solid #D8D8D8;
        margin: 50px auto 72px;
        text-align: center;
        font-size: 16px;
        
        font-weight: 400;
        color: #4C4C4C;
        cursor: pointer;
        &:hover, &:active {
          opacity: 0.8;
        }
      }
      .nodata {
        width: 100%;
        text-align: center;
        margin: 60px 0 40px;
        color: #C0C4CC;
      }
    }
    .right-content {
      width: 380px;
      height: 500px;
      float: right;
      .advertising-box {
        width: 100%;
        height: 112px;
        background: url('../../assets/ercode-banner.png') no-repeat;
        background-size: cover;
        margin-bottom: 52px;
        border-radius: 4px;
      }
      .advertising2-box {
        width: 100%;
        height: 212px;
        background-repeat: no-repeat;
        background-size: cover;
        margin-bottom: 52px;
        border-radius: 4px;
        cursor: pointer;
      }
      .advertising3-box {
        width: 100%;
        height: 212px;
        background-repeat: no-repeat;
        background-size: cover;
        margin-bottom: 52px;
        border-radius: 4px;
        cursor: pointer;
      }
    }
  }
}
</style>